<template>
	<!-- 20250708 左右分栏。group + question + tag。 点击弹窗，在弹窗中操作 -->
	<!-- score是扣分 -->
	<!--
	type 0单选/1多选
	对于“符合/不符合”，options为null
	options 多选的选项，db中的格式：已公示许可5:0.5,已公示检查3:0.3,已查2:0.2,未公示:0 。需在前端组装成name/value格式的数组
	answers 勾选的多选答案。没勾选的，或者不是多选题的，此字段为null
	-->
	<view class="u-wrap app">
		<!-- <view class="u-search-box">
			<view class="u-search-inner">
				<u-icon name="search" color="#909399" :size="28"></u-icon>
				<text class="u-search-text">搜索</text>
			</view>
		</view> -->
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
			 :scroll-into-view="itemId">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
				 @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.description}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
						<view class="item-title">
							<text>{{item.description}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box question-section" v-for="(item1, index1) in item.scoreQuestionList" :key="index1">
								<!-- <image class="item-menu-image" :src="item1.icon" mode=""></image> -->
								<!-- <view class="item-menu-name">{{item1.description}}</view> -->
								
								<view class="question" @click="openQuestion" :data-item="item1" :data-id="item1.id"
								:class="item1.score ? 'red' : item1.imageUrl ? 'green' : ''">
									<text>{{item1.description}}</text>{{ item1.score }}
								</view>
								<!-- <view class="question">
									<text>满分：{{item1.scoreDefault}}</text>
								</view>
								<view class="question question-score">
									<view class="input" v-if="status <= 2">
										扣分：<u-input type="digit" class="form-control" border v-model="item1.score" placeholder="扣分" />
									</view>
									<view class="input" v-else>
										<text>扣分：{{ item1.score }}</text>
									</view>
									<view class="" v-if="!!item1.remark">
										<view class="rotate-bar" :class="{'rotate': showLi[index][index1]}">
											<view class="my-add-btn">
												<u-icon name="arrow-right" size="36" @click="toggle(index, index1)" />
											</view>
										</view>
									</view>
								</view>
								<view class="ul" :class="{'hover': showLi[index][index1]}" :style="{'--height':height}">
									评分要点：{{ item1.remark }}
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="cu-tabbar-height"></view>
			</scroll-view>
		</view>
		
		<view class="" style="position: fixed; bottom: 0; background: #fff; width: 100%;">
			<view class="" style="padding: 10px 20px 4px 4px; display: flex; justify-content: flex-end;">
				同组人员：<input type="text" class="form-control" border style="text-align: right; border: 1px solid blue; padding-right: 20px; width: 180px;" v-model="members" placeholder="同组人员姓名" />
			</view>
			<button @click="submit" type="primary" class="btn btn-primary btn-sm m-btn" v-if="status <= 2" :disabled="disabled">{{buttonText}}</button>
		</view>
		
		<u-popup v-model="show" mode="bottom" width="100%" height="80%">
			<view style="padding: 10px;">
				<view class="question" :data-item="curQuestion" :data-id="curQuestion.id">
					<text>{{curQuestion.description}}</text>
				</view>
				<view class="ul">
					评分要点：不符合要求将不予评定 {{ curQuestion.remark }}
				</view>
				<view class="question" style="display: flex; justify-content: space-around; align-items: center;">
					<text style="width:40%;">满分：{{curQuestion.scoreDefault}}</text>
					<view class="question question-score" style="width:60%;">
						<view class="input" v-if="status <= 2">
							扣分：<u-input type="digit" class="form-control" border v-model="curQuestion.score" placeholder="扣分" />
						</view>
						<view class="input" v-else>
							<text>扣分：{{ curQuestion.score }}</text>
						</view>
					</view>
				</view>
				
				<view class="" v-if="curQuestion.type=='0'">
					<u-radio-group v-model="value" @change="radioGroupChange" >
						<u-radio shape="square" name="a">符合</u-radio>
						<u-radio shape="square" name="b">不符合</u-radio>
					</u-radio-group>
				</view>
				
				<view class="" v-else-if="curQuestion.type=='1'">
					<u-radio-group v-model="curQuestion.answers" @change="radioGroupChange2">
						<u-radio shape="square"
							v-for="(item, index) in curQuestionOptions" :key="index" 
							:name="item.name"
							icon-size="32" size="48">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				
				<view class="" v-else-if="curQuestion.type=='2'">
					<u-checkbox-group :wrap="true" icon-size="32" size="48"
						@change="boxChange">
						<u-checkbox style="margin-bottom: 8px;"
							v-model="item.checked" 
							v-for="(item, index) in curQuestionOptions" :key="index" 
							:name="item.name"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				
				<view class="">手机拍照</view>
				<u-upload ref="upload1"
					:action="uploadAction" 
					:file-list="fileList"
					:header="uploadHeader"
					:max-size="2 * 1024 * 1024" 
					max-count="50"
					@on-choose-complete="chooseComplete"
					@on-success="uploadSuccess"
					@on-error="uploadError"
					@on-uploaded="uploaded"
					@delete="delImg"
					accept="image"
					capture="camera"
				></u-upload>
				 
				<!-- <view class="">从相册选择</view>
				<u-upload ref="upload2"
					:action="uploadAction" 
					:file-list="fileList"
					:header="uploadHeader"
					:max-size="2 * 1024 * 1024" 
					max-count="50"
					@on-choose-complete="chooseComplete"
					@on-success="uploadSuccess"
					@on-error="uploadError"
					@on-uploaded="uploaded"
					accept="image"
					capture="album"
				></u-upload> -->
				
				<u-input style='display: block;' v-model="curQuestion.imageUrl" />
				
				
				<!-- <view class="">{{curQuestion}}</view> -->
				<view class="" style="margin-top: 20px;  text-align: center;">
					<u-button type="primary" size="medium" @click="show = false">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import config from '@/app.config.js'
	import classifyData from '@/common/classify.data.js';
	export default {
		data() {
			return {
				value: 'a',
				
				
				
				evaluateId: '',
				companyId: '',
				recordFormId: '',
				members: '', // 同组人员姓名
				status: 99,
				evaluateInfo:{},
				paperInfo: {},
				disabled: false,
				// action: this.Api + `/upload/uploadPic`,
				act: '',
				buttonText: '提交',
				
				show: false,
				curQuestion: {},
				curQuestionOptions: [],
				
				// showLi: false, // 是否显示li
				showLi: [[]], // 是否显示li
				height: '200rpx', // ul的高度
				
				// 以下是页面控制相关属性
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				// tabbar: classifyData,
				tabbar: [],
				menuItemPos: [],
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				
				// 图片上传
				imgs1: [],
				// uploadAction: this.$api.uploadAction,
				headers: {},
				uploadFormData: {},
				uploadName: 'image',
				minPicCounts: 1, // 至少上传1张照片
				maxPicCounts: 9, // 最多上传9张照片
				imageDomain: this.$api.imageDomain,
				
				
				uploadAction: this.$api.uploadAction,
				fileList: [],
				uploadHeader: {},
			}
		},
		onLoad(options) {
			this.initPage(options)
		},
		onReady() {
			this.getMenuItemTop()
		},
		methods: {
			radioGroupChange(e) {
				console.log(e);
				if(e == 'a') this.curQuestion.score = null;
				else if(e == 'b') this.curQuestion.score = 1;
			},
			radioGroupChange2(e) {
				console.log(e);
				if(!e) this.curQuestion.score = null;
				else{
					let opt = this.curQuestionOptions.find(item => item.name == e)
					console.log('opt.value', opt.value);
					if(opt.value == this.curQuestion.scoreMax) this.curQuestion.score = null;
					else this.curQuestion.score = this.curQuestion.scoreMax - opt.value;
				}
			},
			boxChange(e) {
				console.log('boxChange', e);
				console.log(this.curQuestion.optionsArr);
				if(!e) this.curQuestion.score = null;
				else {
					let v = 0; // 计算得分
					let arr = this.curQuestionOptions.filter(item => item.checked)
					arr.forEach(item => {
						v = (parseInt(v*100) + parseInt(item.value*100))/100;
					})
					if(v == this.curQuestion.scoreMax) this.curQuestion.score = null;
					else{
						this.curQuestion.score = parseInt((this.curQuestion.scoreMax*100 - v*100))/100;
						
						let s = '';
						arr.forEach(item => {
							s += item.name + ','
						})
						if(!s) this.curQuestion.answers = null;
						else {
							s = s.substring(0, s.length-1);
							this.curQuestion.answers = s
						}
					}
				}
			},
			
			
			openQuestion(e){
				console.log('打开问题弹窗', e)
				// this.curQuestion = e.currentTarget.dataset.item
				
				// let id = e.currentTarget.dataset.id
				// this.curQuestion = 
				let cur = e.currentTarget.dataset.item;
				this.curQuestion = this.paperInfo.scoreGroupList.find(g => g.id == cur.groupId).scoreQuestionList.find(q => q.id == cur.id)
				this.curQuestionOptions = this.curQuestion.optionsArr
				
				if(!this.curQuestion.answers) this.curQuestion.answers = '符合'
				
				this.fileList = this.curQuestion.imgUrls
				// if(!this.curQuestion.imageUrl) this.fileList = []
				// else{
				// 	this.fileList = []
				// }
				
				console.log('弹窗数据', this.curQuestion, this.curQuestionOptions)
				
				this.show = true;
			},
			
			toggle(index1,index2){
				this.showLi[index1][index2] = !this.showLi[index1][index2]
				this.$set(this.showLi, index1, this.showLi[index1])
			},
			initPage(options = {}) {				
				if (!options.evaluateId){
					console.log('未传入评价ID！');
					return false;
				}
				if(options.evaluateId) this.evaluateId = options.evaluateId;
				
				if(!this.$util.getToken()){
					this.$util.toLogin(()=>this.initPage())
				}
				let tokenStr = this.$util.getToken() ? 'Bearer ' + this.$util.getToken() : '';
				this.uploadHeader = {
					'Authorization': tokenStr
				}
				this.headers = {
					'Authorization': tokenStr
				}
				
				
				this.getInfo();
			},
			getInfo() {
				let data = {
					id: this.evaluateId,
					expertIds: vk.getVuex('$user.userInfo.userId')
				}
				this.$util.request(this.$api.EvaluateInfo, data, 'GET', null, null, null, null, () => this.getInfo())
					.then(res => {
						if(config.debug) console.log('获取评分详情', res);
						
						if(res.data.status){
							this.status = parseInt(res.data.status);
						}
						this.paperInfo = res.data.form;
						this.evaluateInfo = res.data;
						if(res.data.recordForm){
							this.recordFormId = res.data.recordForm.id;
							this.buttonText = '提交修改';
						}
						if(config.debug) console.log("this.paperInfo", this.paperInfo)
						
						// 垂直分栏页面数据
						this.tabbar = this.paperInfo.scoreGroupList
						
						
						this.members = res.data.members;
						this.showLi = [];
						let show2 = [];
						this.paperInfo.scoreGroupList.forEach((part, partIndex) => {
							show2 = [];
							part.scoreQuestionList.forEach((question, index) => {
								show2.push(false)
								// if(question.id==20005){
								// 	// question.options = "已公示许可:0.5,已公示检查:0.5,未公示:0"
								// 	question.options = "已公示许可5:0.5,已公示检查3:0.3,已查2:0.2,未公示:0"
								// 	question.optionsArr = question.options.split(',').map(item => ({name:item.split(':')[0],value:item.split(':')[1],checked:item.split(':')[1] != '0'}));
								// 	console.log('question.optionsArr', question.optionsArr);
								// }
								if(['1','2'].includes(question.type)){
									// question.options = "已公示许可:0.5,已公示检查:0.5,未公示:0"
									question.optionsArr = question.options.split(',').map(item => ({name:item.split(':')[0],value:Number(item.split(':')[1]),checked:item.split(':')[1] != '0'}));
									// console.log('question.optionsArr', question.optionsArr);
									// if(question.type == 1) question.answers = question.optionsArr[0].name
								}
								if(question.imageUrl){
									question.imgUrls = question.imageUrl.split(',')
								}else{
									question.imgUrls = []
								}
							})
							this.showLi.push(show2)
						})
						
						if(config.debug) console.log("this.showLi", this.showLi)
						
						if(config.debug) console.log("====问题集合", this.paperInfo.scoreGroupList)
						
						uni.setNavigationBarTitle({
							title: this.paperInfo.title
						})
					})
			},
			submit() {
				this.disabled = true;
			
				let submitQuestionList = [];
				let i = 0;
				this.paperInfo.scoreGroupList.forEach((top) => {
					if(top.children){  //有二级分类
						top.children.forEach((second) => {
							second.scoreQuestionList.forEach((question) => {
								// 没扣分的不传后台
								if (question.score) {
									question.questionId = question.id;
									if (question.imgUrls) {
										question.imageUrl = '';
										question.imgUrls.forEach((item) => question.imageUrl += item + ',')
									}
									if (question.imageUrl) {
										question.imageUrl = question.imageUrl.substr(0, question.imageUrl.length - 1);
									}
									// 2021.11.6 将group放入对象，用于在下一页填写扣分说明时显示
									question.groupDescription = second.description
									submitQuestionList[i++] = question;
								}
							})
						})
					}else{  //无二级分类
						top.scoreQuestionList.forEach((question) => {
							// 没扣分的不传后台
							// 2025。7.23 改为：扣分的传，有图片的也传
							if (question.score || question.imageUrl) {
								question.questionId = question.id;
								// if (question.imgUrls) {
								// 	question.imageUrl = '';
								// 	question.imgUrls.forEach((item) => question.imageUrl += item + ',')
								// }
								// if (question.imageUrl) {
								// 	question.imageUrl = question.imageUrl.substr(0, question.imageUrl.length - 1);
								// }
								// 2021.11.6 将group放入对象，用于在下一页填写扣分说明时显示
								question.groupDescription = top.description
								submitQuestionList[i++] = question;
							}
						})
					}					
				})
				
				let data = {
					id: this.recordFormId,
					evaluateId: this.evaluateInfo.id,
					companyId: this.evaluateInfo.companyId,
					year: this.evaluateInfo.year,
					formId: this.evaluateInfo.formId,
					recordFormId: this.recordFormId,
					members: this.members,
					expertId: vk.getVuex('$user.userInfo.userId'),
					createBy: vk.getVuex('$user.userInfo.nickName'),
					scoreRecordList: submitQuestionList
				}
				if(config.debug) console.log('保存data', data)
				
				this.disabled = false;
				this.loading = false;
				return
				
				
				
				
				
				
				
				// 如果扣分了，跳转到“扣分说明”页面，补充扣分说明
				if(submitQuestionList){
					uni.hideLoading();
					this.disabled = false;
					uni.navigateTo({
						url: '/pages/score/scoreRemark?saveData=' + encodeURIComponent(JSON.stringify(data))
					})
					return false;
				}
				
				// 没扣分则提交
				let method = this.recordFormId ? 'PUT' : 'POST';
				
				this.$util.request(this.$api.RecordFormRestful, data, method, null, null, null, null, () => this.submit())
					.then(res => {
						if(config.debug) console.log('submitForm', res)
						if (res.code === 200) {
							vk.toast("保存成功", "success", 1000, true, () => {
								const eventChannel = this.getOpenerEventChannel();
								if (eventChannel.emit) eventChannel.emit('refresh');
								vk.navigateBack();
							});
						} else {
							console.log('保存失败', res)
							this.disabled = false;
							this.loading = false;
							vk.alert(res.msg, '保存失败');
						}
					}).catch((err) => {
						console.log('保存异常', err)
						this.disabled = false;
						this.loading = false;
						vk.alert(JSON.stringify(err), '保存异常');
					})
			},
			
			
			// // 上传图片成功
			// uploadSuccess(res) {
			// 	// uni.hideLoading();
			// 	var _res = JSON.parse(res.data);
			// 	if (_res.code == 1) {
			// 		uni.showToast({
			// 			title: '照片上传成功！',
			// 			duration: 3000
			// 		});
			// 		return {
			// 			success: true,
			// 			url: this.imageDomain + _res.data
			// 		}
			// 	} else {
			// 		uni.showToast({
			// 			title: '照片上传错误！错误信息如下：' + JSON.stringify(res),
			// 			icon: 'none',
			// 			duration: 3000
			// 		});
			// 		console.log(res);
			// 		return {
			// 			success: false,
			// 			url: ''
			// 		}
			// 	}
			// },
			// uploadFail(res) {
			// 	uni.showToast({
			// 		title: '照片上传失败！异常信息如下：' + JSON.stringify(res),
			// 		icon: 'none',
			// 		duration: 3000
			// 	});
			// },
			
			// 选择图片后触发
			chooseComplete(lists, name){
				if(!this.$util.getToken()){
					this.$util.toLogin(()=>this.initPage())
				}
			},
			delImg(e) {
				console.log('删除图片', e)
				this.fileList.splice(e.index,1)
				
				this.curQuestion.imgUrls.splice(e.index,1)
				let arr = this.curQuestion.imgUrls.map(item => {
					let url = item.response ? item.response.fileName : item.url;
					let i = url.indexOf(this.$api.domain);
					if(i > -1) url = url.substring(this.$api.domain.length-1, url.length)
					return url;
				})
				console.log('删除图片成功arr', arr)
				this.curQuestion.imageUrl = arr.toString()
				console.log('删除图片成功 image', this.curQuestion.imageUrl, this.curQuestion.imgUrls)
				
			},
			// 图片上传成功时触发
			uploadSuccess(data, index, lists, name){
				console.log('图片上传成功', data, index, lists, name)
				// this.fileList = lists
				
				this.curQuestion.imgUrls.push(lists[index])
				
				let arr = this.curQuestion.imgUrls.map(item => {
					let url = item.response ? item.response.fileName : item.url;
					let i = url.indexOf(this.$api.domain);
					if(i > -1) url = url.substring(this.$api.domain.length-1, url.length)
					return url;
				})
				console.log('图片上传成功arr', arr)
				this.curQuestion.imageUrl = arr.toString()
				console.log('图片上传成功 image', this.curQuestion.imageUrl, this.curQuestion.imgUrls)
			},
			// 图片上传失败时触发
			uploadError(data, index, lists, name){
				console.log('图片上传失败', data, index, lists, name)
			},
			// 所有图片上传完毕触发
			uploaded(lists, name){
				console.log('全部图片上传完成', lists, name)
				// this.fileList = lists
				
				
				// let files = [];
				// // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				// files = this.$refs.upload1.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// if(files && files.length > 0){
				// 	this.curQuestion.imgUrls = files
					
				// 	let arr = files.map(item => {
				// 		let url = item.response ? item.response.fileName : item.url;
				// 		let i = url.indexOf(this.$api.domain);
				// 		if(i > -1) url = url.substring(this.$api.domain.length-1, url.length)
				// 		return url;
				// 	})
				// 	console.log('全部图片上传完成arr', arr)
				// 	this.curQuestion.imageUrl = arr.toString()
					
				// 	console.log('全部图片上传完成this.curQuestion', this.curQuestion)
				// 	console.log('全部图片上传完成this.paperInfo', this.paperInfo)
				// }
			},
			
			
			// 以下是页面控制相关方法
			
			// 点击左边的栏目切换
			async swichMenu(index) {
				if(this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (index == this.current) return;
				this.scrollRightTop = this.oldScrollTop;
				this.$nextTick(function(){
					this.scrollRightTop = this.arr[index];
					this.current = index;
					this.leftMenuStatus(index);
				})
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
						resolve();
					}).exec();
				})
			},
			// 观测元素相交状态
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
					observer.relativeTo('.right-box', {
						top: 0
					}).observe('#item' + index, res => {
						if (res.intersectionRatio > 0) {
							let id = res.id.substring(4);
							this.leftMenuStatus(id);
						}
					})
				})
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				// console.log('设置左边菜单的滚动状态index', index, this.menuHeight, this.menuItemHeight)
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
				// console.log('设置左边菜单的滚动状态this.scrollTop', this.scrollTop)
			},
			// 获取右边菜单每个item到顶部的距离
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if(!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return ;
						}
						rects.forEach((rect) => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							this.arr.push(rect.top - rects[0].top);
							resolve();
						})
					}).exec()
				})
			},
			// 右边菜单滚动
			async rightScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				if(this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if(this.timer) return ;
				if(!this.menuHeight) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
				}
				setTimeout(() => { // 节流
					this.timer = null;
					// scrollHeight为右边菜单垂直中点位置
					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
							this.leftMenuStatus(i);
							return ;
						}
					}
				}, 10)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		// width: 200rpx;
		// height: 100%;
		width: 240rpx;
		height: 90%;
	}
	.right-box {
		background-color: rgb(250, 250, 250);
		height: 90%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.class-item:last-child {
		// min-height: 100vh;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		// width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>
<style scoped lang="scss">
	@import url("/static/css/main.css");

	.page {
		height: 100vh;
		background-color: #fff;
	}
	
	.app{
		font-size: 16px;
	}

	.title {
		padding: 10rpx 20rpx;
		background: #1b6fb7;
		color: #ffffff;
	}

	.lan {
		padding: 10rpx 20rpx;
		background: #edf6fb;
	}

	// .question-section {
	// 	padding: 10rpx 0;
	// 	background: #fff;
	// }
	
	// .question-section:nth-child(2n+1) {
	// 	background: #edf6fb;
	// }
	
	.question-section {
		padding: 10rpx 0 20rpx;
		background: #fff;
		border-bottom: 1px dashed #aaa;
	}
	
	.question-score {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.question {
		padding: 10rpx 20rpx;
		width: 100%;
	}

	.input {
		display: flex;
		// flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding-right: 20rpx;
	}

	.m-btn {
		// margin-top: 30upx;
		// margin-bottom: 20upx;
		width: 100%;
		height: 40px;
		font-size: 18px;
		// background-color: #ea8834;
		// border-color: #d27a2e;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
	}

	.image-Item {
		width: 160upx;
		height: 160upx;
		margin: 16upx;
		border-radius: 6upx;
	}
	
		.my-add-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40rpx;
			height: 40rpx;
			// background-color: green;
			// color: #fff;
			// border-radius: 50%;
			// box-shadow: 0 0 8px 0 #aaa;
		}
		.rotate-bar{
			transition: .5s transform;
			z-index: 99;
		}
		.rotate{
			transform: rotate(90deg);
			transition: .5s transform;
		}
		.ul{
			padding: 0 20rpx;
			width: 100%;
			height: 0;
			overflow: hidden;
			z-index: 98;
			transition: .5s height;
		}
		.ul.hover{
			height: 200rpx;
			// height: var(--height);
			transition: .5s height;
		}
		.li{
			margin-top:40rpx;
			width: 100rpx;
			height: 40rpx;
			color: green;
			text-align: center;
		}
		.li:first-child{
			margin-top:50rpx;
		}
		
		.red{
			color: red;
		}
		.green{
			color: green;
		}
</style>